<!DOCTYPE html>
<html lang="en">
<head>
  <META charset="utf-8">
   <link rel="stylesheet" type="text/css" href="../jquery/development-bundle/themes/base/jquery.ui.all.css" />

   <style type="text/css">

    /* remove padding and scrolling from elements that contain an Accordion OR a content-div */
    .ui-layout-center ,	/* has content-div */
    .ui-layout-west ,	/* has Accordion */
    .ui-layout-east ,	/* has content-div ... */
    .ui-layout-east .ui-layout-content { /* content-div has Accordion */
        padding: 0;
        overflow: hidden;
    }
    .ui-layout-center P.ui-layout-content {
        line-height:	1.4em;
        margin:			0; /* remove top/bottom margins from <P> used as content-div */
    }
    h3, h4 { /* Headers & Footer in Center & East panes */
        font-size:		1.1em;
        background:		#EEF;
        border:			1px solid #BBB;
        border-width:	0 0 1px;
        padding:		0px; /* 7px 10px; */
        margin:			0;
    }
    .ui-layout-east h4 { /* Footer in East-pane */
        font-size:		0.9em;
        font-weight:	normal;
        border-width:	1px 0 0;
    }
        
    .ui-layout-content 
    {
            overflow:		auto; /* add scrolling to content-divs (panel-wrappers) */
            border-top:		0 !important; /* tab-buttons above this DIV already has a border-bottom */
    }

    /*
     *	TAB-THEME ADJUSTMENTS
     */
	.ui-tabs-nav li {
        white-space:	nowrap;
    }
    .ui-tabs-nav li a {
        font-size:		1em !important;
        padding:		4px 1.5ex 3px !important;
    }
    .ui-tabs-panel {
        font-size:		1em !important;
        padding:		0 !important;
    }
            
    .ui-layout-pane-center 
    {
        background:	#FFD; /* to make pane background stand-out */
        padding:	0px; /* 10px; */
        overflow:	hidden;
    }
    
    .ui-layout-pane-center .ui-tabs-nav 
    {
            /* remove rounded corners from bottom of 'tabs'*/
            -moz-border-radius-bottomleft:		0;
            -moz-border-radius-bottomright:		0;
            -webkit-border-bottom-left-radius:	0;
            -webkit-border-bottom-right-radius:	0;
    }
      
    .ui-layout-resizer 
    { /* all 'resizer-bars' */ 
            background: #DDD; 
    } 

    .ui-layout-toggler 
    { /* all 'toggler-buttons' */ 
            background: #AAA; 
    } 
        
	textarea.chat-input
	{ 
	     margin: 0px;
	     padding: 0px;
	     border-style: none;
	     width: 100%;
	     height: 100%;
	     background: #FFFFFF;
	     resize: none;
	}
	
	div.chat-messages
	{ 
	     margin: 0px;
	     padding: 0px;
	     border-style: none;
	     width: 100%;
	     height: 100%;
	     overflow: scroll;
	     background: orange;
	}
	
	.ui-layout-center
	{
	    margin: 0px;
	    padding: 0px;
	    background: yellow;
	}
	    
	#chat-input-header
	{
	     margin: 0px;
	     padding: 0px;	
	     background: gray;
	}
	    
	.ui-tabs-nav
	{
	    margin: 0px;
	    padding: 0px;
	} 
	
	#tabs_container
	{
	    margin: 0px;
	    padding: 0px;
	} 
	
	.ui-tabs-panel
	{
	    margin: 0px;
	    padding: 0px;
	} 
	
	</style>      

    <script type="text/javascript" src="../libs/jquery-latest.js"></script>
    <script type="text/javascript" src="../libs/jquery-ui-latest.js"></script>
    <script type="text/javascript" src="../libs/jquery.layout-latest.js"></script>
    
	<script>
	var innerlayout = null;

	function log()
	{
	    if (typeof console == "object" && console.log)
	    {
	        console.log.apply(console, arguments);
	    }
	}
	
	function resizeSelectedTab()
    {
		innerlayout.resizeAll();
		log("doing innerlayout.resizeAll()");
		log(innerlayout);
    }
    
    function resizeTabTextArea()
    {
		// This does not work - it does not make the textarea.chat-input resize correctly
		// when the app is started from a non-maximized-browser state.
		// It actually throws an exception.
		// innerlayout.resizeContent("south");
		
		log("doing innerlayout.resizeContent()");
		log(innerlayout);
    }
    
    $(document).ready
    (
        function () 
        {
            $('body').layout({
                west__size:			300
                ,	east__size:			300
                , 	center__onresize:   resizeSelectedTab
                        , north__resizable: false
                        , south__resizable: false  
                        , north__closable:  false
                        , south__closable:  false              
                });
            
            $("#tabs_container").tabs();
            $("#tabs_container").tabs("add", "#dyn_tab", "Dynamic tab");
            $("#tabs_container").tabs("select", "#dyn_tab");
        
            $("#dyn_tab").append
            (
            	"<div class='ui-layout-center'></div>" +
                "<div class='ui-layout-south chat-messages'>" + 
                	"<div id='chat-input-header'>Writing a message :</div>" +
                	"<textarea class='chat-input ui-layout-content'></textarea>" +
            	"</div>"
            );
            
            // These style settings are actually done via CSS styles above too, but they do not take effect ...
            // therefore doing the following below is done explicitely again :
	        var margins = 0;
	        var paddings = 0;
	
	        $("#dyn_tab").css("margin", margins + "px");
	        $("#dyn_tab").css("padding", paddings + "px");
	        $("#dyn_tab").css("border", "none");
	        
	        $("#tabs_container").css("margin", margins + "px");
	        $("#tabs_container").css("padding", paddings + "px");
	        $("#tabs_container").css("border", "none");
	        
	        $(".ui-tabs-nav").css("margin", margins + "px");
	        $(".ui-tabs-nav").css("padding", paddings + "px");
	        $(".ui-tabs-nav").css("border", "none");
	        
	        $("body > .ui-layout-center").css("background", "yellow"); 
	        
	        var mainPanelHeight = $("body > .ui-layout-center").height();
	        var tabsHeight = $(".ui-tabs-nav").height();
	        var resizerHeight = $(".ui-layout-resizer").height();
	        var dynTabLayoutHeight = $("body > .ui-layout-center").height() - tabsHeight;
	        
	        // Without the next line, the layout creation function gives the error message : 
	        // "layout container div has height of 0, therefore the layout is invisible!"."
	        $("#dyn_tab").css("height", dynTabLayoutHeight + "px");	        
	        
	        innerlayout = $("#dyn_tab").layout({ south__resizable: true
	        										, south__size:		100
	        										, south__onresize: resizeTabTextArea });	        
        }
     );
	</script>

</head>
<body>

  <div id="tabs_container" class="ui-layout-center">
    <ul>
        <li><a href="#tabone">Static Tab One</a></li>
        <li><a href="#tabtwo">Static Tab Two</a></li>                        
    </ul>
    <div id="tabone">Tab One contents</div>
    <div id="tabtwo">Tab Two contents</div>
  </div>
  
  <div class="ui-layout-north">North</div>
  <div class="ui-layout-south">South</div>
  <div class="ui-layout-east">East</div>
  <div class="ui-layout-west">West</div>
</body>

</html>